<template>
  <div class="content">
    <el-scrollbar>
      <div class="list">
        <div
          class="specialItem"
          v-for="item in specialList"
          :key="item.categoryId"
        >
          <SpecialItem
            :cover="item.cover"
            :categoryName="item.categoryName"
            :categoryDesc="item.categoryDesc"
            :blogCount="item.blogCount"
            :categoryId="item.categoryId"
          />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount, ref } from "vue";
const { proxy } = getCurrentInstance();

// 部署前执行
onBeforeMount(() => {
  getSpecialList();
});

// 获取专题列表
const specialList = ref([]);
const getSpecialList = async () => {
  let result = await proxy.Request({
    url: "/view/loadSpecial",
  });
  if (!result) {
    return;
  }
  specialList.value = result.data.list;
  console.log(specialList.value);
};
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  padding: 10px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    

    .specialItem{
      margin-top: 5px;
      margin-left: 2%;
      height: 130px;
      width: 32%;
      box-sizing: border-box;
    }

    .specialItem:nth-child(3n-2){
      margin-left: 0;
    }
  }
}
</style>